// 自定义模态框样式
import { StyleSheet } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Dimensions, Platform } from "react-native";

const { width, height } = Dimensions.get("window");
const { colors } = useTheme();

export const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  modalContent: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: colors.background,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: Platform.OS === "ios" ? 34 : 20,
    maxHeight: height * 0.9,
    minHeight: height * 0.5, // 确保最小高度
  },
  backdrop: {
    flex: 1,
    width: "100%",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 16,
    borderBottomWidth: 0.5,
    borderBottomColor: colors.border.divider,
  },
  closeButton: {
    padding: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
    flex: 1,
    textAlign: "center",
  },
  inviteButton: {
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  inviteButtonText: {
    fontSize: 16,
    fontWeight: "500",
    color: colors.primary,
  },
  disabledButton: {
    opacity: 0.5,
  },
  disabledButtonText: {
    color: colors.text.secondary,
  },
  groupInfo: {
    flexDirection: "row",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 0.5,
    borderBottomColor: colors.border.divider,
  },
  groupAvatar: {
    backgroundColor: "#E1E1E1",
  },
  groupTextInfo: {
    marginLeft: 16,
    flex: 1,
  },
  groupName: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 4,
  },
  groupMemberCount: {
    fontSize: 14,
  },
  selectedCount: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: colors.background,
  },
  selectedCountText: {
    fontSize: 14,
  },
  listContainer: {
    flex: 1,
    height: height * 0.5, // 明确设置高度
  },
});
